<template>
	<div class="page" style="width:100%;margin:0 auto;overflow:visible;">
		<div class="leftBox">
			<div class="headerTop">
				<span>知识类型列表</span>
				<el-button v-if="grade<=2" size="mini" type="plain" icon="el-icon-plus"
					style="float: right;vertical-align:middle;margin-top:0.2rem;padding:6px 8px;"
					@click="addType">添加</el-button>
			</div>
			<div>
				<div v-for="(item, i) in articleTypes" :key="item.value" class="oneArticleType"
					@click="showTypeArticle(item.value, $event)">
					<span title="点击查看对应列表">{{ item.label }}({{ item.count }})</span>
					<i v-if="grade<=2" style="color:#f56c6c;" class="el-icon-delete iconBtn" @click="sureDeleteType(item, $event)"></i>
					<i v-if="grade<=2" style="color:#409Eff;" class="el-icon-edit-outline iconBtn" @click="editType(item, $event)"></i>
				</div>
			</div>
		</div>
		<div class="rightBox">
			<el-form inline :model="form" class="form">
				<el-form-item label="">
					<span>文章分类:</span>
					<el-select v-model="form.article_type_id" placeholder="选择工具类型" class="inpu"
						@change="showList(1, queryParams.pageSize, form.keyword, form.article_type_id)">
						<el-option v-for="item in articleAllTypes" :key='item.value' :value="item.value"
							:label="item.label">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<span>关键字:</span>
					<el-input class="inpu" v-model="form.keyword" placeholder=""></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchArticle">查询</el-button>
				</el-form-item>
			</el-form>
			<!-- 按钮区域 -->
			<div class="addBtn" v-if="grade<=2">
				<el-button size="mini" type="success" @click="addArticle()">添加文章</el-button>
				<!-- <el-button size="mini" @click="batchDelete" type="danger">批量删除</el-button> -->
				<el-button v-if="search" size="mini" type="primary" @click="showAll">刷新全部</el-button>
			</div>
			<!-- 表格区域 -->
			<div class="articleTable">
				<el-table :header-cell-style="$tableHeaderStyle" :cell-style="$tableCellStyle" ref="filterTable"
					:data="tableData" size="mini" border style="width: 100%">
					<!-- <el-table-column align="center" type="selection" width="55">
					</el-table-column> -->
					<el-table-column align="center" prop="title" label="名称" min-width="120">
					</el-table-column>
					<el-table-column align="center" label="分类" min-width="100">
						<template slot-scope="scope">
							<span>{{ scope.row.article_type.article_type_name }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="summary" label="概述" min-width="180">
					</el-table-column>
					<el-table-column align="center" label="图片" min-width="80">
						<template slot-scope="scope">
							<a v-if="scope.row.image" :href="baseurl + scope.row.image" target="_blank"><img
									:src="baseurl + scope.row.image"
									style="width:60px;height:40px;vertical-align: middle;color:#999;" title="点击查看原图"
									alt="地址错误" /></a>
							<span v-else style="font-size:0.25rem;">暂无图片</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="是否首页" min-width="80">
						<template slot-scope="scope">
							<span>{{ scope.row.is_index == 1 ? '是' : '否' }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="是否推荐" min-width="80">
						<template slot-scope="scope">
							<span>{{ scope.row.is_recommend == 1 ? '是' : '否' }}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" prop="list_order" label="排序" min-width="60">
					</el-table-column>
					<!-- <el-table-column align="center" prop="article_manager" label="浏览次数" min-width="100">
					</el-table-column> -->
					<el-table-column align="center" prop="update_time" label="更新时间" min-width="120">
					</el-table-column>
					<el-table-column align="center" prop="create_time" label="创建时间" min-width="120">
					</el-table-column>
					<el-table-column align="center" label="操作" :min-width="grade<=2?210:90">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="readLook(scope.row.id)">浏览
							</el-button>
							<el-button v-if="grade<=2" size="mini" type="primary" @click="editArticle(scope.row)">编辑
							</el-button>
							<el-button v-if="grade<=2" size="mini" type="danger" @click="sureDeleteArticle(scope.row.id)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!-- 分页器 -->
			<div class="block">
				<el-pagination @size-change="handleSizeChange" @current-change="current_change"
					:current-page="queryParams.pageNo" :page-sizes="[10, 15, 20]" :page-size="queryParams.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="queryParams.total">
				</el-pagination>
			</div>
		</div>
		<el-dialog :visible.sync="typeAddVisible" width="25%" append-to-body :show-close="close">
			<div class="toptit">
				<span>添加工具类型</span>
				<span style="float:right;cursor: pointer;" @click="typeAddVisible = false">关闭</span>
			</div>
			<el-form :model="addTypeForm" style="text-align: left;margin-top:0.2rem;" block>
				<el-form-item label="类型名称:" label-width="100">
					<el-input class="inpu" v-model="addTypeForm.article_type_name" placeholder="类型名称"></el-input>
				</el-form-item>
			</el-form>
			<div style="text-align: right;">
				<el-button type="primary" size="mini" @click="sureAddType">确 定</el-button>
				<el-button size="mini" @click="typeAddVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="typeEditVisible" width="25%" append-to-body :show-close="close">
			<div class="toptit">
				<span>编辑工具类型</span>
				<span style="float:right;cursor: pointer;" @click="typeEditVisible = false">关闭</span>
			</div>
			<el-form :model="editTypeForm" style="text-align: left;margin-top:0.2rem;" block>
				<el-form-item label="类型名称:" label-width="auto">
					<el-input class="inpu" v-model="editTypeForm.article_type_name" placeholder="类型名称"></el-input>
				</el-form-item>
			</el-form>
			<div style="text-align: right;">
				<el-button type="primary" size="mini" @click="sureEditType">确 定</el-button>
				<el-button size="mini" @click="typeEditVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="lookVisible" width="800px" append-to-body class="contentDial" :show-close="close"
			top="1px">
			<div class="toptit">
				<span>文章浏览 | {{ articleTitle }}</span>
				<span style="float:right;cursor: pointer;" @click="lookVisible = false">关闭</span>
			</div>
			<div ref="contentBox" class="contentBox"></div>
		</el-dialog>

	</div>
</template>

<script>
import { getArticleTypes } from "../request.js"
export default {
	name: 'knowledge',
	data() {
		return {
			win: window,
      grade: Number(localStorage.getItem("atuser_type")),
			baseurl: this.$baseurl,
			close: false,
			search: false,
			currentPage: 1,
			articleTypes: [],
			articleAllTypes: [{
				value: '',
				label: '全部'
			}],
			form: {
				article_type_id: '',
				keyword: ''
			},
			addTypeForm: {
				"article_type_name": '',
			},
			editTypeForm: {
				"id": 0,
				"article_type_name": '',
			},
			queryParams: {
				pageNo: 1,
				pageSize: 10,
				total: 0
			},
			imageObj: null,
			articleContent: '',
			articleTitle: '',
			tableData: [],
			// 选中的工具行
			multipleSelection: [],
			lookVisible: false,
			typeAddVisible: false,
			typeEditVisible: false,
		}
	},
	created() {
		this.getTypes();
		this.showList(this.queryParams.pageNo, this.queryParams.pageSize, this.form.keyword, this.form.article_type_id);
		//console.log(getArticleTypes);
	},
	mounted() {

	},
	methods: {
		getTypes() {
			this.articleTypes = [];
			this.articleAllTypes = [];
			getArticleTypes().then(data => {
				this.articleTypes = data;
				this.articleAllTypes = [{
					value: '',
					label: '全部'
				}, ...data];
				this.form.article_type_id = this.articleAllTypes[0].value;
				///console.log(this.articleTypes);
			});
		},

		addType() {
			this.addTypeForm.article_type_name = "";
			this.typeAddVisible = true;
		},

		sureAddType() {
			this.$http({
				method: 'post',
				url: 'api/articleType/add',
				data: this.addTypeForm
			}).then(res => {
				//console.log(res.data)
				if (res && res.data.result == "success") {
					this.typeAddVisible = false;
					this.$message({
						type: 'success',
						message: '添加知识类型成功！'
					})
					this.getTypes();
				}
			}).catch(error => {
				console.log(error);
			});
		},

		editType(item, event) {
			event.stopPropagation();
			this.editTypeForm.id = item.value;
			this.editTypeForm.article_type_name = item.label;
			this.typeEditVisible = true;
		},

		sureEditType() {
			this.$http({
				method: 'post',
				url: 'api/articleType/update',
				data: this.editTypeForm
			}).then(res => {
				//console.log(res.data)
				if (res && res.data.result == "success") {
					this.typeEditVisible = false;
					this.$message({
						type: 'success',
						message: '编辑知识类型成功！'
					})
					this.getTypes();
				}
			}).catch(error => {
				console.log(error);
			});
		},

		readLook(id) {
			this.lookVisible = true;
			this.$http({
				method: 'post',
				url: 'api/article/info',
				data: { 'id': id }
			}).then(res => {
				//console.log(res.data)
				if (res && res.data.result == "success") {
					this.$refs.contentBox.innerHTML = res.data.data.content;
          this.$refs.contentBox.
					this.articleTitle = res.data.data.title;
				}
			}).catch(error => {
				console.log(error);
			});

		},

		sureDeleteType(item) {
			event.stopPropagation();
			this.$confirm('删除知识类型后无法恢复,是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteType(item);
			}).catch(() => {
				// this.$message({
				// 	type: 'info',
				// 	message: '已取消删除'
				// });
			});
		},

		deleteType(item) {
			var that = this;
			if (item.count > 0) {
				this.$message({
					type: 'error',
					message: '该知识类型下已有文章，不能删除!'
				})
				return
			}
			this.$http({
				method: 'post',
				url: 'api/articleType/delete',
				data: {
					"id": item.value
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.$message({
						type: 'success',
						message: '删除知识类型成功！'
					})
					this.getTypes();
				}
			}).catch(error => {
				console.log(error);
			});
		},

		//获取数据函数
		showList: function (num, size, keyword, typeId) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/article/list',
				data: {
					'limit': size,
					'page': num,
					'article_type_id': typeId,
					'keyword': keyword
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.tableData = res.data.data.list;
					this.queryParams.total = res.data.data.total;
				}
			}).catch(error => {
				console.log(error)
				this.tableData = [];
				this.queryParams.total = 0;
				this.queryParams.pageNo = 1;
			});
		},

		searchArticle() {
			this.showList(1, this.queryParams.pageSize, this.form.keyword, this.form.article_type_id);
			this.search = true;
		},

		showAll() {
			this.form.article_type_id = '';
			this.form.keyword = '';
			this.showList(1, this.queryParams.pageSize);
			this.search = false;
		},

		showTypeArticle(id, event) {
			event.stopImmediatePropagation();
			this.form.article_type_id = id;
			this.showList(1, this.queryParams.pageSize, this.form.keyword, id);
		},

		// 分页器
		current_change: function (currentPage) {
			this.queryParams.pageNo = currentPage;
			this.showList(currentPage, this.queryParams.pageSize, this.form.keyword, this.form.article_type_id);
			//console.log(currentPage)
		},
		handleSizeChange(val) {
			this.queryParams.pageSize = val;
			this.showList(this.queryParams.pageNo, val, this.form.keyword, this.form.article_type_id);
		},
		addArticle() {
			this.$router.push({
				path: 'addArticle',
				name: 'addArticle',
				component: 'addArticle'
			})
		},

		// 编辑工具
		editArticle(row) {
			this.$router.push({
				path: 'editArticle',
				name: 'editArticle',
				component: 'editArticle',
				query: {
					id: row.id
				}
			})
		},

		sureDeleteArticle(id) {
			this.$confirm('删除后该文章将清除,并且无法恢复,是否确认删除?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.deleteArticle(id);
			}).catch(() => {
				// this.$message({
				// 	type: 'info',
				// 	message: '已取消删除'
				// });
			});
		},

		deleteArticle(id) {
			var that = this;
			this.$http({
				method: 'post',
				url: 'api/article/delete',
				data: {
					"id": id
				}
			}).then(res => {
				if (res && res.data.result == "success") {
					this.showList(this.queryParams.pageNo, this.queryParams.pageSize, this.form.keyword, this.form.article_type_id);
					setTimeout(function () {
						if (that.tableData.length == 0 && that.queryParams.pageNo > 1) {
							that.queryParams.pageNo--
							that.showList(that.queryParams.pageNo, that.queryParams.pageSize, that.form.keyword, that.form.article_type_id);
						}
					}, 1000);
				}
			}).catch(error => {
				console.log(error);
			});
		}
	}
}
</script>

<style scoped>
.leftBox {
	float: left;
	width: 12.2%;
	height: 100%;
	color: #333;
	padding-right: 0.1rem;
	/* background-color:#5da573; */
	border-right: 1px solid #ccc;
}

.rightBox {
	float: left;
	width: 87%;
	height: 100%;
	margin-left: 0.2%;
	/* border: 1px solid red; */
}

.headerTop {
	height: 1rem;
	line-height: 1rem;
	border-bottom: 2px solid #ccc;
	font-size: 0.32rem;
	font-weight: 700;
	/* margin-bottom:0.05rem; */
}

.oneArticleType {
	width: 100%;
	height: 0.7rem;
	line-height: 0.7rem;
	cursor: pointer;
	text-align: left;
	font-size: 0.3rem;
	border-bottom: 1px dotted #666;
}

.iconBtn {
	float: right;
	font-size: 0.4rem;
	margin: 0.2rem 0.12rem 0 0;

}

.form {
	margin-top: 0.2rem;
	height: 0.8rem;
	line-height: 0.8rem;
	text-align: left;
}

.inpu {
	width: 5rem;
	display: inline-block;
	vertical-align: middle;
}

.addBtn {
	margin: 0.2rem 0 0.2rem 0;
	display: flex;
	align-items: center;
}

.contentBox {
	/* height:calc(100vh - 0.8rem - 40px); */
}

.articleTable{
  margin-top: 0.1rem;
}



.contentDial {
	height: 100vh;
}

.contentDial>>>.el-dialog {
	margin-bottom: 0px !important;
}

.contentDial>>>.el-dialog__body {
	box-sizing: border-box;
	height: calc(100vh - 0.8rem - 1px);
	margin-top: 0.2rem;
	overflow: auto;
}

.contentDial>>>.el-dialog__body img{
  max-width:100%!important;
}
</style>
